<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'
import * as _ from 'lodash'
let props = defineProps(['itemList','scrollTop', 'status', 'layout'])
let emits = defineEmits(['onLower','scrollTopUpdate'])
const onLower = () => {
  emits('onLower')
}


// debugger

const content_1_2 = computed(()=>{
  return props.layout == '1'
})

const content_1_1 = computed(()=>{
  return props.layout == '2'
})


</script>

<template>
  <view  class="scroll-Y" >
    <view :class="{ 'content-1-2': content_1_2, 'content-1-1': content_1_1 }">
      <ItemAsCard :key="item.id" class="item" v-for="item in itemList" :image="item.image" textWidth="100"
        :is-collect="item.is_collected" :item="item" 
             detail_url="/pages/detail/index2" collect_url="/api/onlyforone/colorAtlasProductCollection/add"
              cancel_collect_url="/api/onlyforone/colorAtlasProductCollection/delete"
        ></ItemAsCard>
    </view>
    <view class="load-more-container">
      <u-loadmore :status="props.status" fontSize="16" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.scroll-Y {
  width: 100%;
  height: 100%;
  // padding: 0 20rpx;

  .content-1-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 每行两个元素 */
    gap: 20rpx;
    padding-bottom: 20rpx;
  }

  .content-1-1 {
    display: grid;
    // grid-template-columns: repeat(2, 1fr); /* 每行两个元素 */
    gap: 20rpx;
    padding-bottom: 20rpx;
    // padding: 0 20rpx;
  }
}
</style>
